<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="1000" height="600"></canvas>
	     <script type="text/javascript">
	     	var canvas = document.getElementById("myCanvas");
	     	var tax=canvas.getContext("2d");
			var x1= 100;
			var y1= 100;
			var R1= 30;
			var l1=5;
			var t1=5;
			
			var x2= 50;
			var y2= 550;
			var R2= 50;
			var l2=10;
			var t2=10;
			
			setInterval(function(){
				tax.fillStyle="rgba(0,255,0,0.3)";
				tax.fillRect(0,0,1000,600);
				tax.beginPath();
				tax.fillStyle="blueviolet";
//			    tax.fillRect(0,0,1000,600);
			    tax.fillStyle="mediumvioletred";
			    tax.arc(x1,y1,R1,0,2*Math.PI);
			    tax.fill();
			    x1 =x1 +l1;
			    y1 =y1 +t1;
			    
			    if(y1>600-R1 || y1<R1){
			    	t1 = -t1;
			    }
			   if(x1>1000-R1|| x1<R1){
			    	l1 = -l1;
			    }
//			    
                
				tax.beginPath();
				tax.fillStyle="red";
////			    tax.fillRect(0,0,1000,600);
//			    tax.fillStyle="mediumvioletred";
			    tax.arc(x2,y2,R2,0,2*Math.PI);
			    tax.fill();
			    x2 =x2+l2;
			    y2 =y2 +t2;
			    
			    if(y2>600-R2 || y2<R2){
			    	t2 = -t2;
			    }
			   if(x2>1000-R2|| x2<R2){
			    	l2 = -l2;
			    }
			},35);
			
			
			
			
			
			
			
		</script>
	</body>
</html>
